<template>
<div>
    <ButtonGroup>
        <Button type="primary" @click="modal = true">添加</Button>
        <Button type="error">删除多个</Button>
    </ButtonGroup>

    <Input v-model="data.name">
        <Button slot="append" icon="ios-search" @click="search"></Button>
    </Input>

    {{data.name}}

    <Modal
        v-model="modal"
        title="用户信息"
        @on-ok="ok"
        @on-cancel="cancel">
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
          <FormItem label="Name" prop="name">
              <Input v-model="formValidate.name" placeholder="Enter your name"></Input>
          </FormItem>
          <FormItem label="E-mail" prop="mail">
              <Input v-model="formValidate.mail" placeholder="Enter your e-mail"></Input>
          </FormItem>
          <FormItem>
              <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
              <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
          </FormItem>
      </Form>
    </Modal>



    <Table border :columns="columns" :data="list"></Table>
    <Page :total="data.total" 
    @on-change="onChangePage"
    @on-page-size-change="onPageSizeChange"
    size="small" show-elevator show-sizer></Page>
</div>
</template>
<script>
    import Base from '../common/Base';

    export default {
        mixins:[Base],
        data () {
            return {
                module:'users',
                formValidate: {
                    name: '',
                    mail: 'a@a.com'
                },
                ruleValidate: {
                      name: [
                          { required: true, message: 'The name cannot be empty', trigger: 'blur' }
                      ],
                      mail: [
                          { required: true, message: 'Mailbox cannot be empty', trigger: 'blur' },
                          { type: 'email', message: 'Incorrect email format', trigger: 'blur' }
                      ]
                  },
               
                columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: 'Name',
                        key: 'name',
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'person'
                                    }
                                }),
                                h('strong', params.row.name)
                            ]);
                        }
                    },
                    {
                        title: 'Email',
                        key: 'email'
                    },
                    {
                        title: 'Action',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.show(params.index)
                                        }
                                    }
                                }, 'View'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params)
                                        }
                                    }
                                }, 'Delete')
                            ]);
                        }
                    }
                ]
            }
        }
    }

    /*
        添加和修改应该用同一个表单
        如何用同一个表单就实现添加、修改呢？只需要设置一个_id的字段，如果id存在，点submit的时候就是修改，
        如果id不存在，则就是新增
        仅仅是一个判断而已
    */
</script>
